<template>
  <section class="xmv-badges xmv-wrap">
    <h4>导航</h4>
    <div class="demo-markup-source u-letter-box--small c-text">
      <xm-header :isHomeTitle="true">
        <div slot="back" class="c-header-back" @click="$router.go(-1);"></div>
        <div slot="right" class="header__share btn-clipboard btn"></div>
      </xm-header>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltxm-header :isHomeTitle="true"&gt
            &ltdiv slot="back" class="c-header-back">&lt/div&gt
            &ltdiv slot="right" class="header__share btn-clipboard btn"&gt&lt/div&gt
          &lt/xm-header&gt
        </code>
      </pre>
    </div>
    <div class="demo-markup-source u-letter-box--small c-text">
      <xm-header title="添加银行卡">
        <div slot="back" class="c-header-back" @click="$router.go(-1);"></div>
      </xm-header>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltxm-header title="添加银行卡"&gt
            &ltdiv slot="back" class="c-header-back" @click="$router.go(-1);"&gt&lt/div&gt
          &lt/xm-header&gt
        </code>
      </pre>
    </div>
    <div class="demo-markup-source u-letter-box--small c-text">
      <xm-header>
        <div slot="back" class="c-header-back" @click="$router.go(-1);"></div>
        <div slot="search" class="brand-search-box">
          <input type="search">
          <span class="brand-search-icon"></span>
        </div>
      </xm-header>
    </div>
    <div class="demo-markup-source u-letter-box--small">
      <pre class="c-pre">
        <code class="c-code c-code--multiline html hljs xml">
          &ltxm-header title="添加银行卡"&gt
            &ltdiv slot="back" class="c-header-back" @click="$router.go(-1);"&gt&lt/div&gt
            &ltdiv slot="search" class="brand-search-box"&gt
              &ltinput type="search"&gt
              &ltspan class="brand-search-icon">&lt/span&gt
            &lt/div&gt
          &lt/xm-header&gt
        </code>
      </pre>
    </div>
  </section>
</template>
<style lang="less" scoped>
.header__share {
  width: 0.4rem;
  height: 0.4rem;
  background: url(../../assets/code1.png) no-repeat;
  background-size: 100% 100%;
}
.brand {
  &-search {
    &-box {
      display: flex;
      margin: 0 11.2%;
      height: 100%;
      box-sizing: border-box;
      position: relative;
      align-items: center;
      justify-content: flex-end;
      input {
        height: .56rem;
        width: 100%;
        border-radius: 4px;
        font-size: .28rem;
        line-height: .28rem;
        color: #333;
        text-indent: 2%;
      }
    }
    &-icon {
      position: absolute;
      top: 50%;
      margin-top: -.14rem;
      right: 2%;
      display: inline-block;
      width: .28rem;
      height: .28rem;
      background: url(../../assets/search.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}


.c-header-back {
  width: 0.28rem;
  height: 0.28rem;
}
h4 {
  font-weight: normal;
  font-size: 14px;
  text-align: left;
  background-color: #e9e9e9;
  padding: 10px;
  margin: 20px 0;
}
p {
  text-align: left;
  padding: 0.5em 0;
}
.c-code--multiline {
  display: block;
  padding: 0.5em 1em;
  border-radius: 4px;
  white-space: pre;
  word-wrap: normal;
  overflow-x: auto;
}
.demo-markup-source {
  text-align: left;
}
.c-code {
  font-size: 0.8em;
}
</style>